<template>
    <div>
        <!-- 面包屑导航 -->
        <Bread></Bread>
        <el-card>
            <el-row>
                <el-button type="primary" @click="addRole">添加角色</el-button>
            </el-row>
            <el-table :data="rolesList" border style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <!-- 一级分类 -->
                        <el-row v-for="item in scope.row.children" :key="item.id" type="flex" align="middle"
                            class="oneRow">
                            <el-col :span="6">
                                <el-tag closable>{{ item.authName }}</el-tag>
                            </el-col>
                            <el-col :span="18">
                                <!-- 二级分类 -->
                                <el-row v-for="it in item.children" :key="it.id">
                                    <el-col :span="5">
                                        <el-tag type="success" closable>{{ it.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="19">
                                        <!-- 三级分类 -->
                                        <el-tag type="warning" v-for="i in it.children" :key="i.id" closable
                                            @close="delRight(scope.row.id, i.id)">
                                            {{ i.authName }}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="roleName" label="日期">
                </el-table-column>
                <el-table-column prop="roleDesc" label="姓名">
                </el-table-column>
                <el-table-column prop="address" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delRole(scope.row)">删除</el-button>
                        <el-button type="primary" size="mini" @click="showRights(scope.row.id)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 权限树 -->
            <el-dialog title="分配权限" :visible.sync="showTree" @close="close">
                <!-- {{leaf}} -->
                <!-- 树形组件 -->
                <el-tree ref="tree" :data="treeList" :props="defaultProps" node-key="id" default-expand-all
                    show-checkbox :default-checked-keys="leaf">
                </el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showTree = false">取 消</el-button>
                    <el-button type="primary" @click="saveRight">确 定</el-button>
                </div>
            </el-dialog>
            <!-- Dialog组件 -->
            <Dialog :myDialog="myDialog" :formData="formData" @getRoles="getRoles"></Dialog>
        </el-card>
    </div>
</template>
<script>
import Bread from '@/components/Bread.vue'
import Dialog from '@/components/roles/Dialog.vue'
export default {
    components: { Bread, Dialog },
    data() {
        return {
            flag: false,
            rolesList: [],//角色列表数据
            showTree: false,//是否展示权限树模态框
            treeList: [],//权限列表
            defaultProps: {
                label: 'authName',
                children: 'children'
            },
            leaf: [],//获取所有三级叶子节点
            roleId: '',
            /* 模态框的基础设置 */
            myDialog: {
                flag: false,//是否显示
                type: '',//add or edit
                title: ''//标题
            },
            /* Dialog的表单数据绑定 */
            formData: {
                roleName: '',
                roleDesc: ''
            }
        }
    },
    methods: {
        /* 获取角色列表数据 */
        async getRoles() {
            let res = await this.$http.get('roles');
            this.rolesList = res.data;
        },
        /* 删除角色 */
        async delRight(roleId, rightId) {
            let res = await this.$http.delete(`roles/${roleId}/rights/${rightId}`);
            // console.log(res);
            let key = this.rolesList.findIndex(item => {
                return item.id == roleId
            })
            this.rolesList[key].children = res.data
        },
        /* 展示权限树的方法 */
        showRights(id) {
            this.roleId = id;//给角色授权传递id
            this.leaf = [];
            this.showTree = true;
            let key = this.rolesList.findIndex(item => {
                return item.id == id
            })
            this.getLeaf(this.rolesList[key].children);
        },
        /* 获取所有权限数据 */
        async getTree() {
            let res = await this.$http.get('rights/tree');
            // console.log(res);
            this.treeList = res.data;
        },
        /* 获取当前角色下的三级权限 */
        getLeaf(arr) {
            // console.log(arr);
            arr.forEach(item => {
                if (item.children) {
                    this.getLeaf(item.children);
                } else {
                    this.leaf.push(item.id);
                }
            })
        },
        /* 关闭所有节点 */
        close() {
            this.$refs.tree.setCheckedKeys([]);
        },
        /* 点击“分配权限”的确定按钮 */
        async saveRight() {
            // console.log(this)
            /* 获取全部节点 */
            let all = this.$refs.tree.getCheckedKeys();
            /* 获取半节点 */
            let half = this.$refs.tree.getHalfCheckedKeys();
            let checkString = [...all, ...half].join(',');
            // console.log(checkString);
            /* 请求角色授权接口 */
            // console.log(this.roleId)
            let res = await this.$http.post(`roles/${this.roleId}/rights`, { rids: checkString });
            // console.log(res);
            if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                this.showTree = false;//关闭权限树模态框
                this.getRoles();//获取角色列表数据
            }
        },
        /* 添加角色 */
        addRole() {
            (
                this.myDialog = {
                    flag: true,//是否显示
                    type: 'add',//add or edit
                    title: '添加角色'//标题
                }
            ),
                (
                    /* Dialog的数据绑定 */
                    this.formData = {
                        roleName: '',
                        roleDesc: ''
                    }
                )
        },
        /* 编辑角色 */
        edit(info) {
            console.log(info);
            //先设置编辑的基础数据，然后给formData进行赋值
            this.myDialog = {
                flag: true,//是否显示
                type: 'edit',//add or edit
                title: '编辑角色'//标题
            }
            this.formData = {
                roleName: info.roleName,
                roleDesc: info.roleDesc,
                roleId: info.id
            }
        },
        /* 删除角色 */
        delRole(del) {
            // console.log(del);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$http.delete(`roles/${del.id}`)
                // console.log(res);
                if (res.meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getRoles();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    mounted() {
        this.getRoles();
        this.getTree();
    }
}
</script>

<style lang="scss" >
.oneRow {
    margin: 20px;
    border-top: 1px solid #eee;
    padding: 20px;
}

.oneRow:last-child() {
    border-bottom: 1px solid #eee;
}
</style>